import { Image, View } from "@tarojs/components"
import Global from "@/src/lib/global"
import BorderlessButton from "./borderless-button"
import "./placeholder.scss"

interface PlaceholderProps {
    desc?: string,
    button?: string,

    onBtnClick?: () => void
}

const Placeholder = (props: PlaceholderProps) => {

    return (
        <View className="placeholder">
            <Image className="placeholder-image" src={ Global.loadImage("placeholder@3x.png")}/>
            <View className="placeholder-desc">
                {
                    props.desc?.split("\\n").map((t) => {
                        return <View>{t}</View>
                    })
                }
            </View>

            <BorderlessButton className="placeholder-btn" onClick={ props.onBtnClick }>{ props.button }</BorderlessButton>
        </View>
    )
}

export default Placeholder